<template>
    <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在添加..." >
        <el-button type="success" @Click="openDig">添加题目</el-button>
        <el-dialog v-model="UpdateDialogVisible" title="添加题目预览" width="30%" @close="cancelUpdateClick()" :close-on-click-modal="false">

            <span>
                <el-form label-position="right" label-width="100px" style="max-width: 460px">
                    <el-form-item label="题目类型">
                        <span>
                            <el-select v-model="updateSelectValue" class="m-2" placeholder="Select">
                                <el-option :label="item.subjectTypeName" :value="item.subjectTypeId" v-for="item in store.state.questionBank.subjectModel.subjectPagination.subjectTypeList" :key="item.subjectTypeId"/>
                             <!--    <el-option label="判断题" :value="2" />
                                <el-option label="多选题" :value="3" /> -->
                            </el-select>
                        </span>
                    </el-form-item>
                    <el-divider />
                    <el-form-item label="题目">
                        <el-input v-model="subjectTitle" :rows="4" type="textarea" placeholder="Please input" />
                    </el-form-item>
                    <el-divider />
                    <el-form-item label="选项答案" v-if="updateSelectValue != 2">
                        <el-input v-model="item.content" v-for="item in subjectOptionAnswer" :key="item.id">
                            <template #prepend>
                                <span style="width:10px">
                                    {{item.id}}
                                </span>
                            </template>

                        </el-input>
                        <el-space :size="0">
                            <el-button :icon="Plus" style="width:auto" @click="addXuanXiang()"></el-button>
                            <el-button :icon="SemiSelect" style="width:auto" @click="jianXuanXiang()"
                                :disabled="subjectOptionAnswer.length <= 1"></el-button>
                        </el-space>

                    </el-form-item>
                    <el-form-item label="选项答案" v-if="updateSelectValue == 2">
                        <el-input v-model="item.content" v-for="item in subjectOptionAnswer" :key="item.id"
                            :readonly="true">
                            <template #prepend>
                                <span style="width:10px">
                                    {{item.id}}
                                </span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-divider />
                    <el-form-item label="正确答案" v-if="updateSelectValue == 1">
                        <el-select v-model="subjectRightKey[0]" class="m-2" placeholder="Select">
                            <el-option :label="item.id" :value="item.id" v-for="item in subjectOptionAnswer"
                                :key="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="正确答案" v-if="updateSelectValue == 2">
                        <el-select v-model="subjectRightKey[0]" class="m-2" placeholder="Select">
                            <el-option :label="item.id" :value="item.id" v-for="item in subjectOptionAnswer"
                                :key="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="正确答案" v-if="updateSelectValue == 3">
                        <el-select v-model="subjectRightKey" class="m-2" placeholder="Select" :multiple="true">
                            <el-option :label="item.id" :value="item.id" v-for="item in subjectOptionAnswer"
                                :key="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>

            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelUpdateClick()">取消</el-button>
                  <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="题目不能为空"
                      placement="bottom"
                      :disabled="!(subjectTitle === '')"
                  >
                    <span><el-button type="primary" @click="keepUpdateClick()" :disabled="subjectTitle === ''">保存</el-button></span>
                  </el-tooltip>

                </span>
            </template>
        </el-dialog>
        <!-- 选择类型 -->
        <el-dialog v-model="selectSubjectTypeShow" title="选择类型" width="20%" :show-close="false" :close-on-click-modal="false">
            <span>类型为>>>{{accountTypeId == null ? '':accountTypeId.industryName}}</span>
            <el-divider />
            <span>
                <el-scrollbar height="200px">
                    <TreeCommponent :treeData="store.state.questionBank.subjectModel.subjectTypeTreeData"
                        @treeComponent="treeComponent" :defaultExpandAll="false" :showCheckBox="false" v-if="showTree">
                    </TreeCommponent>
                </el-scrollbar>

            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="selectCancelClick()">取消</el-button>
                    <el-button type="primary" @click="selectKeepUpdateClick()" :disabled="showButtonOfSelectType">确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import { useStore } from 'vuex'
import {SemiSelect,Plus} from '@element-plus/icons-vue'
import { ElNotification,ElMessage } from 'element-plus'
import { watch } from '@vue/runtime-core'
import axios from 'axios';
export default {
    setup(){
        const store = new useStore()
        //弹出层开关
        let UpdateDialogVisible = ref(false)
        //打开添加弹出层
        function openDig(){
            UpdateDialogVisible.value = true
        }

        //题目
        let subjectTitle = ref('')
        //题目类型
        let updateSelectValue = ref(1)
        //题目选项答案
        let subjectOptionAnswer = ref([{"id":"A","content":""}])
        //题目正确答案
        let subjectRightKey = ref(["A"])
        //题目的科目类型
        let accountTypeId = ref(null)
        

        //********************************** */
        //取消弹出层按钮
        function cancelUpdateClick(){
            //数据初始化
            subjectTitle.value = ''
            subjectOptionAnswer.value = [{"id":"A","content":""}]
            subjectRightKey.value = ["A"]
            updateSelectValue.value = 1
            accountTypeId.value = null
            //********************* */
            UpdateDialogVisible.value = false//关闭弹出层
            /* ElMessage({
                message: '取消操作',
                type: 'message',
            }) */
        }
        //保存按钮
        function keepUpdateClick(){
            showTree.value = true
            selectSubjectTypeShow.value = true
        }
        //********************************** */
        //添加一个选项按钮
        function addXuanXiang(){
            let acCode = String.fromCharCode(subjectOptionAnswer.value[subjectOptionAnswer.value.length - 1].id.charCodeAt(0) + 1);
            subjectOptionAnswer.value.push({"id":acCode,"content":""})
        }
        //减一个题目选项按钮
        function jianXuanXiang(){
            subjectOptionAnswer.value.splice(subjectOptionAnswer.value.length - 1, 1);
        }
        //******************************** */
        //监听器，监听用户选择的题型
        watch(updateSelectValue, (newVal) => {
            //console.log(updateDigData.value.type);
            if (newVal == 2) {
                subjectOptionAnswer.value = [{ "id": "A", "content": "对" }, { "id": "B", "content": "错" }];
                subjectRightKey.value = ["A"];
            }
            else {
                    subjectOptionAnswer.value = [{ "id": "A", "content": "" }];
                    subjectRightKey.value = ["A"]
            }
        }, {
            deep: true,
            immediate: false
        });
        //******************************************** */
        //选择科目类型的开关
        let selectSubjectTypeShow = ref(false)
        //确认按钮是否禁用
        let showButtonOfSelectType = ref(true)
        //选择好的回调函数
        function treeComponent(a) {
            if (!a.level) {
                accountTypeId.value = a
                showButtonOfSelectType.value = false
            } else {
                accountTypeId.value = null
                showButtonOfSelectType.value = true
            }
        }
        //取消按钮
        function selectCancelClick(){
            accountTypeId.value = null
            showTree.value = false
            selectSubjectTypeShow.value = false
            showButtonOfSelectType.value = true
        }
        //树组件的销毁
        let showTree = ref(false)
        //确定按钮
        function selectKeepUpdateClick(){
            fullscreenLoading.value = true
            let dataServer = {
                subjectDTO: {
                    subjectTitle:subjectTitle.value,
                    subjectXuanDaan:JSON.stringify(subjectOptionAnswer.value),
                    subjectRight:subjectRightKey.value.toString(),
                    subjectType:updateSelectValue.value
                },
                accountTypeId: accountTypeId.value.industryId,
                subjectPageDTO: {
                    subjectTypeId: store.state.questionBank.subjectModel.subjectPagination.subjectTypeId,
                    accountTypeId: store.state.questionBank.subjectModel.subjectPagination.accountTypeId,
                    status: store.state.questionBank.subjectModel.subjectPagination.status,
                    pageNumber: store.state.questionBank.subjectModel.subjectPagination.pageNum,
                    pageSize: store.state.questionBank.subjectModel.subjectPagination.pageSize
                }
            }
            axios.post("/api/subject/insertOneSubject",JSON.stringify(dataServer),{
                headers:{
                    'Content-Type':'application/json;charset=UTF-8'
                }
                
            }).then((response) => {
                if (response.status == 200) {
                    if (response.data.code == 200) {
                        store.commit('selectSubjectTableData', response.data.data.list)
                        store.commit('selectSubjectTableTotal', response.data.data.total)
                        ElNotification({
                            title: '操作成功',
                            message: '添加成功',
                            type: 'success',
                        })
                        //数据初始
                        subjectTitle.value = ''
                        subjectOptionAnswer.value = [{ "id": "A", "content": "" }]
                        subjectRightKey.value = ["A"]
                        updateSelectValue.value = 1
                        accountTypeId.value = null
                        //********************* */
                        showTree.value = false
                        selectSubjectTypeShow.value = false
                        UpdateDialogVisible.value = false//关闭弹出层
                    }else{
                        ElNotification({
                            title: '操作失败',
                            message: '添加失败',
                            type: 'error',
                        })
                    }
                }else{
                    ElNotification({
                            title: '操作异常',
                            message: '添加异常',
                            type: 'warring',
                        })
                }
            }).finally(() => {
               fullscreenLoading.value = false
            })
               
        }
        //遮罩层
        let fullscreenLoading = ref(false)
        return {
            showButtonOfSelectType,
            fullscreenLoading,
            accountTypeId,
            showTree,
            openDig,
            addXuanXiang,
            jianXuanXiang,
            UpdateDialogVisible,
            selectSubjectTypeShow,
            treeComponent,
            selectCancelClick,
            store,
            updateSelectValue,
            selectKeepUpdateClick,
            subjectRightKey,
            subjectOptionAnswer,
            subjectTitle,
            cancelUpdateClick,
            keepUpdateClick,
            SemiSelect,
            Plus
        }
    }
}
</script>

<style>

</style>